<template>
  <div class="page has-navbar" v-nav="{ title: 'Home' }">
    <div class="page-content text-center">
      <h2 class="padding" v-text="msg"></h2>
      <router-link class="button button-assertive" to="/about">
        <i class="ion-information-circled"></i> About
      </router-link>
      <router-link class="button button-assertive" to="/flowers">
        <i class="ion-information-circled"></i> flowers
      </router-link>
      <router-link class="button button-assertive" to="/cart">
        <i class="ion-information-circled"></i> Cart
      </router-link>
      <router-link class="button button-assertive" to="/psMsg">
        <i class="ion-information-circled"></i> PsMsg
      </router-link>
      <router-link class="button button-assertive" to="/shopCenter">
        <i class="ion-information-circled"></i> ShopCenter
      </router-link>
      <router-link class="button button-assertive" to="/servicer">
        <i class="ion-information-circled"></i> Servicer
      </router-link>
    </div>
  </div>
</template>
<script>
  import Pay from './page/Pay'
  import Manjian from './components/ManJian'
  export default {
    data () {
      return {
        msg: 'Hello! Vonic.',
      }
    },
    components : {
      Pay,
      Manjian
    }
  }
</script>
<style lang="less">
  a{
    text-decoration: none;
  }
  .button-assertive{
    margin: 15px;
  }
  h2 {
    font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif;
    color: #888;
  }

  .navbar {
    background: #000000;
    h1{
    color: #ffffff;
    }
  }
  .button{
    color: #ffffff;
  }
  .button:hover{
    color: #cccccc;
  }

</style>
